<div class="layout vertical" style="height: 100%" xmlns:v-bind="http://www.w3.org/1999/xhtml">

    <div class="layout vertical start-justified">
        <ui-prop name="存放路径:">
            <div class="flex-1 layout horizontal center">
                <ui-input class="flex-1" readonly
                          v-value="fileSavePath"></ui-input>
                <ui-button v-on:confirm="onClickSelect">选择</ui-button>
                <ui-button v-on:confirm="onClickOpen" v-if="isShowOpenBtn">打开</ui-button>
            </div>
        </ui-prop>

        <ui-prop name="保存文件名:">
            <div class="flex-1 layout horizontal  center">
                <ui-input class="flex-1" v-on:blur="onUpdateSaveName" v-value="fileSaveName"></ui-input>
                <ui-button class="green" v-on:confirm="onClickGen"> 生成</ui-button>
            </div>
        </ui-prop>

        <ui-prop name="导入到项目:">
            <div class="flex-1 layout horizontal  center ">
                <ui-input class="flex-1" readonly v-value="fileImportPath"></ui-input>
                <ui-button class="  " v-on:confirm="onSelectImportPath"> 选择</ui-button>
                <ui-button class=" red " v-on:confirm="onImportFont"> 导入</ui-button>
            </div>

        </ui-prop>
        <!--<h2> 拖拽图片到下边 </h2>-->

        <table class="myTable">
            <colgroup>
                <col style="width: 40px">
                <col style="width: 400px">
                <col style="width: 80px">
                <col style="width: 80px">
                <col style="width: 80px">
                <col style="width: 80px">
                <col/>
            </colgroup>
            <thead>

            <tr>
                <th class="myTableHead" align="left">id</th>
                <th class="myTableHead" align="left">本地文件路径</th>
                <th class="myTableHead" align="left">尺寸</th>
                <th class="myTableHead" align="center">图片</th>
                <th class="myTableHead" align="center">字符</th>
                <th class="myTableHead" align="center">操作</th>
            </tr>
            </thead>
        </table>
        <ui-box-container class="shadow height-limited"
                          style="min-height: 200px; max-height: 300px"
                          v-on:drop="drop($event)"
                          v-on:dragover="dragOver($event)"
                          v-on:dragenter="dragEnter($event)"
                          v-on:dragleave="dragLeave($event)">
            <!--<div class="layout vertical">
            </div>-->
            <table style="table-layout: fixed;vertical-align: middle;width: 100%">
                <char-item track-by="$index" v-for="(index,charItem) in charDataArray" v-bind:data="charItem"
                           v-bind:index="index"></char-item>
            </table>
        </ui-box-container>


    </div>
    <h2>日志:</h2>
    <textarea class="flex-1 " id="logTextArea" v-value="logView"
              style="width: 100%; height: 100%; background: #252525;	color: #fd942b;	border-color: #fd942b;"></textarea>
</div>


